/* eslint-disable no-unused-vars */
import React, { Component } from 'react'
import styles from '../style/index.less';

export default class Tabs extends Component {

  // Tab栏配置
  tabConfig = {
    municipalUnits: { name: '市政工程', color: '#5AB1F1', },
    waterProject: { name: '接水工程', color: '#A7CF81', },
    completeDesign: { name: '完成设计', color: '#00E2F0', },
    contractSigning: { name: '合同签订', color: '#A39FE3', },
    completionAcceptance: { name: '竣工验收', color: '#F04864', },
  }

  // 生成Tab
  getTabs = (item) => {
    const { total, wc, xj, zj, jsgc, szgc } = item;
    const { name, color } = this.tabConfig[item.name];
    let len = 0; // 判断当前卡片底部属性个数  (3||2)
    for (let k in item) len++;  // 4 || 3
    // 底部展示两个属性
    const twoEle = (
      <>
        <div className={styles.tap_bottom_two}>
          <span>市政工程  <span style={{ fontWeight: 700 }}>{szgc}</span>  项</span>
        </div>
        <div className={styles.tap_bottom_two}>
          <span>接水工程  <span style={{ fontWeight: 700 }}>{jsgc}</span>  项</span>
        </div>
      </>
    );
    // 底部展示三个属性
    const threeEle = (
      <>
        <div className={styles.tap_bottom_three}>
          <p style={{ paddingTop: '10px' }}>新建</p>
          <p style={{ fontWeight: 700 }}>{xj}</p>
        </div>
        <div className={styles.tap_bottom_three}>
          <p style={{ paddingTop: '10px' }}>在建</p>
          <p style={{ fontWeight: 700 }}>{zj}</p>
        </div>
        <div className={styles.tap_bottom_three}>
          <p style={{ paddingTop: '10px' }}>完成</p>
          <p style={{ fontWeight: 700 }}>{wc}</p>
        </div>
      </>
    );
    return (
      <div className={styles.engManage_tap} style={{ border: `1px solid ${color}` }} key={item.name}>
        <div style={{ backgroundColor: color }} className={styles.tap_top}>
          <span className={styles.tap_top_num}>{total}</span>
          <span className={styles.tap_top_name}>{name}</span>
        </div>
        <div className={styles.tap_bottom}>
          {len === 4 ? twoEle : threeEle}
        </div>
      </div>
    )

  }

  render() {
    return (
      <>
        {this.getTabs(this.props)}
      </>
    )
  }
}
